<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        *{
            padding: 0;
            margin: 0;
            user-select: none;
        }
        .starContainer{
            width: 300px;
            height: 40px;
            line-height: 40px;
            margin: auto;
        }
        .star--item{
            color: skyblue;
        }
    </style>

</head>
<body>
<div class="starContainer">
    <i class="star--item fa fa-3x fa-star-o"></i>
    <i class="star--item fa fa-3x fa-star-o"></i>
    <i class="star--item fa fa-3x fa-star-o"></i>
    <i class="star--item fa fa-3x fa-star-o"></i>
    <i class="star--item fa fa-3x fa-star-o"></i>
</div>
<p class="star--grade">默认好评</p>
</body>
<script>
    var starItem = document.getElementsByClassName('star--item');
    var starGrade = document.getElementsByClassName('star--grade')[0];
    var gradeArr = ["垃圾", "不行", "阔以", "很棒", "nice！"];
   /* for(var i = 0; i < starItem.length; i++){
        starItem[i]['data-index'] = i;
        starItem[i].onclick = function () {
            var num = this['data-index'];
            for(var j = 0; j < starItem.length; j++){
                if(j <= num){
                    starItem[j].className = 'star--item fa fa-3x fa-star';
                }else {
                    starItem[j].className = 'star--item fa fa-3x fa-star-o';
                }
                starGrade.innerText = gradeArr[num];
            }
        }
    }*/
    for(var i = 0; i < starItem.length; i++){
        starItem[i]['data-index'] = i;
        starItem[i].onclick = function(){
            var num = this['data-index'];
            for(var j = 0; j < starItem.length; j++){
                if(j <= num){
                   starItem[j].className = "star--item fa fa-3x fa-star";
                }else{
                    starItem[j].className = "star--item fa fa-3x fa-star-o";
                }
                starGrade.innerHTML = gradeArr[num];
            }
        }
    }
</script>
</html>